import { generateIdentifier, globalStyle } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { gridStyle } from '../grid/grid.css';

export const listStyle = generateIdentifier(undefined);

globalStyle(`${gridStyle}.${listStyle}`, {
	background: vars.color.panelBackground,
});

globalStyle(`${gridStyle}.${listStyle}>div.body>div.line>div`, {
	borderBottom: 'none',
});

globalStyle(`${gridStyle}.${listStyle}>div.body>div.line>div>span.arrow`, {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	width: '1.5rem',
	height: '2rem',
	flexShrink: 0,
});

globalStyle(`${gridStyle}.${listStyle}>div.body>div.line>div>span.content`, {
	marginLeft: '0.3rem',
});

globalStyle(`${gridStyle}.${listStyle}>div.body>div.line>div>span.arrow>svg`, {
	fill: vars.color.emphasizeText,
	width: '1.4rem',
	height: '1.4rem',
});
